// import xtxSkeleton from './xtx-skeleton.vue'
// import xtxCarousel from './xtx-carousel.vue'
// import xtxMore from './xtx-more.vue'
// import xtxBread from './xtx-bread.vue'
// import XtxBreadItem from './xtx-bread-item.vue'
import defaultImg from '@/assets/images/200.png'
// 指令
const defineDirective = app => {
  app.directive('LazyLoad', {
    mounted(el, binding) {
      const observer = new IntersectionObserver(
        ([{ isIntersecting }]) => {
          if (isIntersecting) {
            observer.unobserve(el)
            el.onerror = () => {
              el.src = defaultImg
            }
            el.src = binding.value
          }
        },
        { threshold: 0.1 }
      )
      observer.observe(el)
    }
  })
}
const importFn = require.context('/', false, /\.vue$/)

export default {
  install(app) {
    // app.component(xtxSkeleton.name, xtxSkeleton)
    // app.component(xtxCarousel.name, xtxCarousel)
    // app.component(xtxMore.name, xtxMore)
    // app.component(xtxBread.name, xtxBread)
    // app.component(XtxBreadItem.name, XtxBreadItem)
    importFn.keys().forEach(keys => {
      const component = importFn(keys).default
      app.component(component.name, component)
    })
    defineDirective(app)
  }
}
